<template>
  <nav-bar class="detailNav" :class="{titlesCss:titlesCss}">
    <div slot="navLeft" class="deTopLeft" @click="deGoback">
      <img src="@/assets/images/common/back.svg" alt />
    </div>
    <div slot="navCenter" class="detailTop" :class="{titlesCss:titlesCss}">
      <div
        class="deTopItem"
        v-for="(item,index) in titles"
        :key="index"
        @click="titleSwitch(index)"
        :class="currentTitle == index ? 'active' : '' "
      >{{item}}</div>
    </div>
  </nav-bar>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  name: "DetailTop",
  props: {
    titles: Array,
    default() {
      return [];
    }
  },
  components: {
    NavBar
  },
  data() {
    return {
      currentTitle: 0,
    };
  },
  computed: {
    titlesCss(){
			return this.titles.length == 1
		}
  },
  methods: {
    deGoback() {
      this.$router.back();
    },
    titleSwitch(index) {
      this.currentTitle = index;
      this.$emit("titleSwitch", index);
    }
  }
};
</script>

<style>
.detailNav {
  box-shadow: 1px 0 2px pink;
}
.detailNav.titlesCss {
  background-color: var(--color-tint) !important;
}
.detailTop {
  display: flex;
}
.deTopLeft {
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  padding-top: 2px;
}

.deTopItem {
  flex: 1;
  font-size: 15px;
}
.detailTop.titlesCss .deTopItem {
  font-size: 20px;
  color: #fff;
}
.active {
  color: var(--color-tint);
}
</style>
